<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UI Customizaton Prototype</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<!-- script src="unittest.js" type="text/javascript"></script -->
<!-- link rel="stylesheet" href="../test.css" type="text/css" / -->

<style type="text/css" media="screen">
	body {
		font-family: sans-serif, Helvetica, Arial;
	}

	div.section {
		margin-top:5px;
		margin-left: 4px;
		/*border:1px dashed gray;*/
		/*clear: both;*/
		/*width: 100%;*/
		float: left;
		width: 49%;
	}
	
	div.title {
		cursor: move;
		font-weight: bold;
		background-color: #C5DEA1;
		color: black;
		clear: both;
		border:1px solid #C5DEA1;
	}
	
	div.cell {
		float: left;
		background-color: #ECF3E1;
		border:1px solid #C5DEA1;
		cursor: move;
		width: 100%;
	}
	
	exp {
		background-color: #ECF3E1;
		border:1px solid #C5DEA1;
	}

	span.label {
		clear: both;	
		float: left;
		text-align: right;
		margin-right: 4px;
		width: 33%;
	}
	
	span.field {
		float: left;
		width: 66%;
	}
	
  </style>
</head>
<body>
<h1>UI Customizaton Prototype</h1>

<div id="topdiv" style="float:left; width: 100%;">
	<div id="section0" class="section">
		<span><div class="title">Section 0</div></span>
		<div class="cell"><label><span class="label">First Name</span><span class="field"><input type="text" size="30"/></span></label></div>
		<div class="cell"><label><span class="label">Last Name</span><span class="field"><input type="text" size="40"/></span></label></div>
		<div class="cell"><label><span class="label">Company Name</span><span class="field"><textarea rows="3" ></textarea></span></label></div>
		<div class="cell"><label><span class="label">Address 1</span><span class="field"><input type="text" size="30"/></span></label></div>
		<div class="cell"><label><span class="label">Address 2</span><span class="field"><input type="text" size="30"/></span></label></div>
	</div>
	<div id="section1" class="section" >
		<span><div class="title">Section 1</div></span>
		<div class="cell"><label><span class="label">City</span><span class="field"><input type="text" size="30"/></span></label></div>
		<div class="cell"><label><span class="label">State</span><span class="field"><input type="text" size="2"/></span></label></div>
		<div class="cell"><label><span class="label">ZIP</span><span class="field"><input type="text" size="11"/></span></label></div>
		<div class="cell"><label><span class="label">Phone</span><span class="field"><input type="text" size="13"/></span></label></div>
	</div>
</div>
<br/><br/><p/>
<div style="clear: both;">
	<exp style="float: left; clear: both;">element 1</exp>
	<exp style="float: left;">element 2 (left)</exp>
	<exp style="clear:both; float:left; bottom: 20px;" >below</exp>
</div>

<script type="text/javascript">
 // <![CDATA[
   var containers = new Array(3);
   for (var i = 0; i < containers.length; i++) {
   	 containers[i] = "section" + i;
   }
   
   for (var i = 0; i < containers.length; i++) {
	   Sortable.create(containers[i],
	     {tag: 'div', dropOnEmpty:true, containment:containers, constraint:false
	     });
   }
   
   //Sortable.create('topdiv',
   //  {tag: 'div', dropOnEmpty:true, constraint:false
   //  });
   

 // ]]>
 </script>

</body>
</html>
